<!-- 日报模板配置 -->
<template>
  <div class="set_sales">
    <dt-modal-edit ref="edit" title="日报模板配置" :label-width="130" okText="确认" :width="65" @ok="onOk">
      <Row class="label_warp">
        <Col span="24" class="tips">
          <Icon type="md-alert" class="tips_icon" />
          <div>您可选择需要在“案场日报”中展示的指标，系统将根据已选指标自动生成日报</div>
        </Col>
      </Row>
      <ul class="sourcedataCon">
        <li v-for="(item, index) in infoList" :key="index">
          <div class="item_title">
            <label class="item_title_label">{{ item.dailyName }}</label>
            <i-switch size="large" v-model="item.hasShow" @on-change="changeSwitch(item, index)">
              <span slot="open">显示</span>
              <span slot="close">隐藏</span>
            </i-switch>
          </div>
          <div class="item_check_box">
            <div
              v-for="(itemC, indexC) in item.childModelConfig"
              :key="indexC"
              :class="[item.hasShow ? 'open_class' : 'close_class', 'checkbox_warp']">
              <Checkbox
                v-model="itemC.hasLock"
                border
                :disabled="!itemC.hasDefault || !item.hasShow"
                @on-change="changeCheck(item, itemC)">
                <span>{{ itemC.dailyConfigName }}</span>
              </Checkbox>
            </div>
          </div>
          <Row class="label_warp" v-if="item.tips">
            <Col span="24" class="tips">
              <Icon type="md-alert" class="tips_icon" />
              <div>
                {{ item.tips }}
                <span @click="setHandel(item)" class="set_btn">立即设置</span>
              </div>
            </Col>
          </Row>
        </li>
      </ul>
    </dt-modal-edit>
    <set-channel ref="setChannel" />
    <set-sales ref="setSales" />
  </div>
</template>

<script>
  import dailyApi from '@/biz/buildingHome/daily'

  import setChannel from './setChannel.vue'
  import setSales from './setSales.vue'
  export default {
    components: {
      setChannel,
      setSales
    },
    data() {
      return {
        infoList: [],
        currentDate: ''
      }
    },
    methods: {
      changeSwitch(item, index) {
        if (!item.hasShow) {
          this.$Modal.confirm({
            title: `“统计指标”隐藏确认`,
            content: `请确认，是否将“${item.dailyName}”从案场日报中隐藏?`,
            closable: true,
            onOk: () => {
              item.hasShow = false
            },
            onCancel: () => {
              item.hasShow = true
            }
          })
        }
      },
      changeCheck(data, curData) {
        if (
          !data.childModelConfig.some((item) => {
            return item.hasLock
          })
        ) {
          this.$Modal.confirm({
            title: `“统计指标”隐藏确认`,
            content: `取消所有统计项勾选后，“渠道统计”将不在当前“案场日报”中显示。请确认是否继续操作?`,
            closable: true,
            onOk: () => {
              data.hasShow = false
            },
            onCancel: () => {
              curData.hasLock = true
              console.log(data, curData)
            }
          })
        }
      },
      // 设置 渠道/销售
      setHandel(data) {
        console.log(data)
        if (data.dailyType == 3) {
          //设置渠道显示规则
          // this.onOk(false).then(res => {
          // })
          this.$refs.setChannel.show(this.currentDate)
        } else if (data.dailyType == 4) {
          //设置销售显示规则
          this.onOk(false).then((res) => {
            this.$refs.setSales.show(this.currentDate)
          })
        }
      },
      show(data) {
        console.log(data, 'data')
        this.currentDate = data.date
        this.infoList = this.$tool.deepClone(data.templateAllList)
        // this.infoList[0].childModelConfig = this.infoList[0].childModelConfig.splice(0, 1)
        this.$refs.edit.show()
      },
      hide() {
        this.$refs.edit.hide()
      },
      onOk(flag = true) {
        this.infoList.forEach((item) => {
          item.buildingId = this.$dt.buildInfo().housesId
        })
        //判断渠道统计显示状态下 是否全部勾选
        if (this.infoList[2].hasShow) {
          let flagOne = this.infoList[2].childModelConfig.some((item) => {
            return item.hasLock
          })
          if (!flagOne) {
            this.$Message.warning('请至少选择一个渠道统计指标')
            return false
          }
        }
        let params = {
          reqList: this.infoList
        }
        console.log(params, 'params')
        return dailyApi.updateModelList(params).then((res) => {
          this.$emit('success')
          if (flag) {
            this.hide()
            this.$Message.success('配置成功')
          }
          return Promise.resolve(1)
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .set_sales {
    .sourcedataCon {
      padding: 0 10px;
      margin-top: 15px;
      max-height: 500px;
      min-height: 250px;
      overflow-y: auto;

      li {
        padding: 10px;
        border: 1px solid #ccc;
        margin-bottom: 20px;

        .item_title {
          display: flex;
          justify-content: space-between;

          .item_title_label {
            font-size: 16px;
            font-weight: 600;
          }
        }

        .item_check_box {
          margin: 15px 0;
        }

        .checkbox_warp {
          display: inline-block;
          margin-bottom: 10px;
        }

        .open_class {
          ::v-deep .ivu-checkbox-wrapper-disabled.ivu-checkbox-border {
            border-color: #2d8cf0;

            .ivu-checkbox-disabled + span {
              color: #2d8cf0;
            }

            .ivu-checkbox-disabled.ivu-checkbox-checked .ivu-checkbox-inner:after {
              border-color: #2d8cf0;
            }
          }

          .ivu-checkbox-wrapper-checked.ivu-checkbox-border {
            color: #2d8cf0;
          }
        }

        .close_class {
          ::v-deep .ivu-checkbox-wrapper-disabled.ivu-checkbox-border {
            border-color: #dcdee2;

            .ivu-checkbox-disabled + span {
              color: #dcdee2;
            }

            .ivu-checkbox-disabled.ivu-checkbox-checked .ivu-checkbox-inner:after {
              border-color: #dcdee2;
            }
          }
        }
      }
    }

    .label_warp {
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      line-height: 32px;
      padding: 10px;

      .tips {
        line-height: 20px;
        font-size: 14px;
        display: flex;

        .tips_icon {
          font-size: 20px;
          color: #0f42a7;
          vertical-align: sub;
        }

        .set_btn {
          color: #2d8cf0;
          cursor: pointer;
        }
      }
    }

    .colorBlue {
      color: #2d8cf0;
    }

    ::v-deep .ivu-checkbox {
      margin-right: 5px;
    }

    ::v-deep .ivu-checkbox-disabled.ivu-checkbox-checked .ivu-checkbox-inner {
      border-color: #2d8cf0;
      background-color: #2d8cf0;
    }
  }
</style>
